<template>
  <HeaderNavTabarVue :title="title" />
  <view class="uv-empty" v-if="orderTakingPool.length === 0">
    <uv-empty :text="emptyText" icon="../../../static/images/empty.png"></uv-empty>
  </view>
  <view v-else class="orderTakingPool" :style="'min-height: ' + boxHeight + 'rpx;'">
    <SiftCom
      @searchEmit="searchEmit"
      @siftList="siftList"
      @resetEmit="resetEmit"
      @popupSiftOpen="popupSiftOpen"
    >
      <h4>筛选类型</h4>
      <view class="typeSift">
        <button
          :class="searcData.designType == '待设计' ? 'activeBtn sift-left' : 'sift-left'"
          @tap="searcData.designType = '待设计'"
        >
          待设计
        </button>
        <button
          :class="searcData.designType == '驳回' ? 'activeBtn sift-right' : 'sift-right'"
          @tap="searcData.designType = '驳回'"
        >
          驳回
        </button>
        <button
          :class="searcData.designType == '已核算' ? 'activeBtn sift-right' : 'sift-right'"
          @tap="searcData.designType = '已核算'"
        >
          已核算
        </button>
        <button
          :class="searcData.designType == '待审核' ? 'activeBtn sift-right' : 'sift-right'"
          @tap="searcData.designType = '待审核'"
        >
          待审核
        </button>
        <button
          :class="searcData.designType == '审核通过' ? 'activeBtn sift-right' : 'sift-right'"
          @tap="searcData.designType = '审核通过'"
        >
          审核通过
        </button>
      </view>
      <view class="picker-content">
        <view class="measurement-info-list">
          <text class="info-list-left">测量日期</text>
          <view class="info-list-right" @tap="openPicker">
            <view v-if="searcData.surveyDate" class="info-content">
              {{ searcData.surveyDate }}
            </view>
            <view class="uni-inputs" v-else>请选择</view>
            <i class="iconfont icon-youjiantou"></i>
          </view>
        </view>
      </view>
      <view class="picker-content">
        <view class="measurement-info-list">
          <text class="info-list-left">测量单编号</text>
          <view class="info-list-right">
            <view class="info-content">
              <input
                adjust-position
                type="number"
                class="uni-input placeholder-right"
                placeholder="请输入"
                v-model="searcData.id"
              />
            </view>
          </view>
        </view>
      </view>
      <!--      <MyPicker-->
      <!--        @getVlaue="getVlaue"-->
      <!--        ref="customerPickerRef"-->
      <!--        popupTitle="请选择设计师名称"-->
      <!--      >-->
      <!--        <view class="picker-content" @tap="toggle">-->
      <!--          <view class="measurement-info-list">-->
      <!--            <text class="info-list-left">设计师</text>-->
      <!--            <view class="info-list-right">-->
      <!--              <view class="uni-input">{{ searcData.employeeName }}</view>-->
      <!--              <i class="iconfont icon-youjiantou"></i>-->
      <!--            </view>-->
      <!--          </view>-->
      <!--        </view>-->
      <!--      </MyPicker>-->
    </SiftCom>
    <main class="box-main">
      <CardList
        v-for="(item, index) in orderTakingPool"
        :key="index"
        :manufacturerContact="item.customerName"
        :customerId="item.id"
        :designType="item.designType"
        :detailedAddress="item.detailedAddress"
        mainFloorSvg="测量单"
        :terminalPhone="item.terminalPhone"
        :surveyDate="item.surveyDate"
        :terminalName="item.terminalName"
      ></CardList>
    </main>
    <view class="animbox-scroll-loading" v-show="statusLoding">
      <view></view>
      <view></view>
      <view></view>
      <view></view>
      <view></view>
    </view>
  </view>
  <uv-datetime-picker
    ref="datetimePicker"
    :modal-append-to-body="false"
    v-model="pickerValue"
    mode="date"
    :formatter="formatter"
    round="32 32 0 0"
    @confirm="confirm"
  >
  </uv-datetime-picker>
</template>

<script setup>
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import SiftCom from '@/components/siftCom/siftCom.vue'
import CardList from '@/components/cardList/cardList.vue'
import MyPicker from '@/components/MyPicker/MyPicker.vue'
import { getNowDate } from '@/utils/date.js'
import { getdesignerMentsApi, listMeasurement } from '@/api/customer.js'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref, reactive } from 'vue'
import { getTitleBarHeight } from '@/utils/system.js'
import store from '@/store'
const title = '设计稿审核'
const boxHeight = (uni.getSystemInfoSync().windowHeight - getTitleBarHeight()) * 2

// 搜索的数据
let searcData = ref({
  surveyDate: '',
  id: '',
  employeeId: '',
  employeeName: '',
  terminalName: '',
  designType: '',
  sortType: '',
})
const emptyText = ref('数据请求中...')

let orderTakingPool = ref([])
// 筛选日期
// 刷选日期
let pickerValue = ref(Number(new Date()))
const datetimePicker = ref(null)

const openPicker = () => {
  datetimePicker.value.open()
}
const formatter = (type, value) => {
  if (type === 'year') {
    return `${value}年`
  }
  if (type === 'month') {
    return `${value}月`
  }
  if (type === 'day') {
    return `${value}日`
  }
  return value
}
const confirm = (e) => {
  pickerValue.value = getNowDate(e.value)
  searcData.value.surveyDate = getNowDate(e.value)
}
const customerPickerRef = ref(null) // 这个时候获取了子组件 Comp
// 设计师信息
let designerList = ref([])
// 获取设计师下拉菜单数据
const getdesignerMentsApiData = async (v = '') => {
  let params = {
    employeeName: v,
  }
  let { code, data } = await getdesignerMentsApi(params)
  if (code == 200) {
    data.forEach((v) => {
      designerList.value.push({
        label: v.employeeName,
        value: v.employeeId,
      })
    })
    store.commit('setCustomerList', designerList.value)
  }
}

// 选择的设计师数据
const getVlaue = (v) => {
  searcData.value.employeeId = v.value
  searcData.value.employeeName = v.label
  customerPickerRef.value.closePop()
}
// 打开模态床
const toggle = () => {
  customerPickerRef.value.toggle('bottom') // 调用子组件的 show 方法
}

// 打开筛选狂
const popupSiftOpen = () => {
  for (let key in searcData.value) {
    if (searcData.value[key]) {
      searcData.value[key] = ''
    }
  }
}

const resetEmit = (v) => {
  listMeasurementFn('', true)
  v.close()
}

const siftList = (v) => {
  // console.log(v,'vvv') // 0 降序 1 升序
  pageNum.value = 1
  searcData.value.sortType = Number(v) + 1
  listMeasurementFn(searcData.value, true)
}

const searchEmit = (v) => {
  pageNum.value = 1
  listMeasurementFn(searcData.value, true)
  v.close()
}

let pageNum = ref(1)
let pageSize = ref(30)
let totals = ref(888)
let statusLoding = ref(false)
const listMeasurementFn = async (data = {}, flag = false) => {
  let page = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    designType: data.designType || '',
  }
  let params = Object.assign(data, page)
  let res = await listMeasurement(params)
  let { code, rows, total } = res
  try {
    if (code == 200) {
      if (statusLoding.value) {
        statusLoding.value = false //加载中状态
      }
      if (flag) {
        orderTakingPool.value = rows
      } else {
        orderTakingPool.value = [...orderTakingPool.value, ...rows]
      }

      totals.value = total
      if (orderTakingPool.value.length === 0) {
        emptyText.value = '列表为空'
      }
    }
  } catch {}
}

onReachBottom(() => {
  statusLoding.value = true //加载完状态
  let allTotal = pageNum.value * pageSize.value
  if (allTotal < totals.value) {
    pageNum.value++
    listMeasurementFn(searcData.value, true)
  } else {
    uni.showToast({
      title: '数据加载完毕',
    })
    statusLoding.value = false
  }
})
onLoad(() => {
  getdesignerMentsApiData()
  listMeasurementFn()
})
</script>

<style lang="scss" scoped>
@import '../../../static/style/index.scss';

:deep(.uni-input-input) {
  text-align: right;
}

.orderTakingPool {
  padding: 0 32rpx 24rpx 32rpx;
  box-sizing: border-box;
  background-color: $uni-bai;

  h4 {
    font-weight: 550;
    font-size: 30rpx;
    color: #1d2129;
    text-align: center;
    margin: 40rpx 0;
  }

  .typeSift {
    display: flex;
    align-items: center;

    button {
      height: 68rpx;
      border-radius: 8rpx;
      border: 1px solid #e5e6eb;
      background: #f5f7fa;
      font-size: 28rpx;
    }

    .activeBtn {
      background-color: #e8f3ff;
      border: 1px solid #94bfff;
    }
  }

  .box-main {
    padding: 107rpx 0;
    box-sizing: border-box;
  }
}

.measurement-info-list {
  @include flex($align: center, $justify: space-between);
  padding: $spacing-row-base;

  .info-list-left {
    // @include font-color-auxiliary;
    color: $uni-fc-fu-lin;
    font-size: $font-size-base;
  }

  .info-list-right {
    @include flex($align: center);

    .info-content {
      @include textStyleBase;
      font-size: 34rpx;
    }

    .iconfont {
      margin-left: 16rpx;
      // @include font-color-auxiliary;
      color: $uni-fc-fu-lin;
    }
  }

  .unit {
    // @include font-color-auxiliary;
    color: $uni-fc-fu-lin;
  }
}
</style>
